import React from "react";
import "./circleDetails.css";
import { Select } from "antd";

const { Option } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}

class CircleDetails extends React.Component {
  constructor() {
    super();
    this.state = {
      circleList: [
        {id: 1,postTitle:'【一部优秀的古言小说写作指要】',bookCircleId: 1,releaseAuthorId: 2,releaseTime: '2020-12-21',likeNum: 47},
        {id: 1,postTitle:'【一部优秀的古言小说写作指要】',bookCircleId: 1,releaseAuthorId: 2,releaseTime: '2020-12-21',likeNum: 47},
        {id: 1,postTitle:'【一部优秀的古言小说写作指要】',bookCircleId: 1,releaseAuthorId: 2,releaseTime: '2020-12-21',likeNum: 47},
        {id: 1,postTitle:'【一部优秀的古言小说写作指要】',bookCircleId: 1,releaseAuthorId: 2,releaseTime: '2020-12-21',likeNum: 47},
        {id: 1,postTitle:'【一部优秀的古言小说写作指要】',bookCircleId: 1,releaseAuthorId: 2,releaseTime: '2020-12-21',likeNum: 47},
      ],
    };
  }

  componentDidMount() { }

  getCircleList(List) {
    if (List) {
      return List.map((item) => {
        return (
          <li>
            <div>
              <div>置顶</div>
              <p className="circleTitle">{item.postTitle}</p>
            </div>
            <p>{item.likeNum}人赞过</p>
          </li>
        )
      })
    }
  }

  render() {
    return (
      <div>
        <div className="circleInformation">
          <img alt="" src="./images/gudaiyanqing.jpg"></img>
          <div className="rightCircle">
            <p className="circleName">古代言情</p>
            <div className="chengyuantiezi">
              <p>成员 340000</p>
              <p>帖子 36555</p>
              <div className="caozuo">加入</div>
            </div>
          </div>
        </div>
        <div className="circleList">
          <div className="top">
            <p>全部帖子</p>
            <div>
              <span className="iconfont icon-bi"></span>我要发贴
            </div>
          </div>
          <div className="circleSorting">
            <p>共1521条帖子</p>
            <Select
              defaultValue="按热度排序"
              style={{ width: 120 }}
              onChange={handleChange}
            >
              <Option value="按时间排序">按时间排序</Option>
              <Option value="按热度排序">按热度排序</Option>
            </Select>
          </div>
          <ul className="listShow">
            {this.getCircleList(this.state.circleList)}
          </ul>
        </div>
      </div>
    );
  }
}

export default CircleDetails;
